<script setup>

</script>


<template>
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="content">
    <view class="pic" v-for="(item,index) in [0,1,2,3,4,5]" :key="index">
       <image
       class="pic-items"
        src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_big_1.jpg"
        mode="scaleToFill"
       />
       <view class="pic-desc">我是介绍{{ item }}</view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
:host {
  display: block;
}
.text{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;
    height: 45rpx;
    line-height: 28rpx;
    font-size: 24rpx;
    margin: 5rpx 2rpx;
    }

.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 5rpx;
    .pic{
        width:270rpx;
        padding: 2rpx 2rpx 2rpx;
        margin-bottom: 10rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #fff;
    }
    .pic-items{
          height: 240rpx;
          width: 240rpx;
        }
    .pic-desc{
          height: 30rpx;
          font-size: 24rpx;
    }
}

</style>